<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="../js/jquery-3.1.1.js"></script>
<!--<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
  $("#div1 > p").each(function(i){
    $(this).on("click",{x:i},function(event){
      alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);
    });
  });
   $("#div2").on("click","button",function(event){
    $(event.delegateTarget).css("background-color", "pink");
  });
  
  $("#div3 *").click(function(event){
		alert(event.currentTarget.innerText );
  });  
  
    
  $("#button1").click(function(event){
    return "Hello world!2";
  });
  $("#button1").click(function(event){
    return "Hello world!";
  });
  $("#button1").click(function(event){
    $("#p22").html(event.result);
  });  
  
});
</script>
	</head>
	<body>
		<h1>title</h1>
<div id="div1" style="color:red">点击每一个 p 元素返回数据，通过 on() 方法来实现。
	<h1>title</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>这是另外一个段落。</p>
</div>
<div  id="div2"  style="background-color:yellow">
<p>点击按钮修改这个 div 元素的背景颜色。</p>
<button>点我!</button>
</div>

<div  id="div3"  >
<h1>标题 1</h1>
<h2>标题 2</h2>
<p><b>注意:</b> 点击每一个 HTML 元素。currentTarget 类似于 "this", 所以返回 "true"。</p>
</div>
<div  id="div4"  >
<button id=button1 >点我显示 event.result</button>
<p id="p22" >这是一个段落。</p>
</div>
	</body>
</html>
